<template>
  <div class='list' ref='wrapper'>
      <div>
            <div class='area'>当前城市</div>
              
            <div class='btn-wrapper'>
                <div class='btn'>{{this.$store.state.city}}</div>
            </div>
             
            <div class='area'>热门城市</div>
            <router-link to='/'>
            <div class='btn-wrapper'>
                <div class='btn'  v-for='item of hotCities' :key='item.id' @click='handleClick(item.name)'>{{item.name}}</div>
            </div>
            </router-link>
            <div  v-for='(item, key) of cities' :key='key' :ref='key'>
            <div class='area'>{{key}}</div>
            <router-link to='/'>
            <div class='area-list' v-for="innerItem of item" :key='innerItem.id' @click='handleClick(innerItem.name)'>
                <div class='item'>{{innerItem.name}}</div>
            </div>
            </router-link>
            </div>
    </div>
</div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
        name: 'CityList',
        props:{
            cities:Object,
            hotCities:Array,
            letter:String
        },
        methods:{
            handleClick:function(city){
                this.$store.commit('changecity',city)
            }
        },
        mounted:function(){
            this.scroll=new BScroll(this.$refs.wrapper)
        },
        watch:{
            letter:function(){
                if(this.letter){
                const element = this.$refs[this.letter][0]
                    this.scroll.scrollToElement(element)
                }
            }
        }
        
}
  </script>
  
<style lang='stylus' scoped>
.list
    position:absolute
    width:100%
    top:1.58rem
    bottom:0
    left:0
    rigth:0
    overflow: hidden
    .area
        height :.54rem
        line-height :.54rem
        text-indent :.2rem
        border-bottom :0.01rem solid #ccc
        background:#eee
    .btn-wrapper
        text-align:center
        border-bottom :0.01rem solid #ccc
        padding-left:.2rem
        padding-bottom:.2rem
        overflow:hidden
        .btn
            float :left
            margin-top:.2rem
            margin-left:.2rem
            top:.19rem
            text-align:cnter
            width:27%
            border-radius: .06rem
            border:.01rem solid #ccc
            padding:.1rem 0
    .area-list
        .item
            height:.76rem
            border-bottom :0.01rem solid #ccc
            line-height:.76rem
            text-indent:.2rem   
</style>